import React, {Component} from "react";
import {Icon, Menu, Spin, message} from "antd";
import {Link, withRouter} from "react-router-dom";
import post from "../../util/requestUtil";

class SideMenu extends Component {
    constructor(props) {
        super(props);
    }

    state = {
        menuLoading: true,
        menus: [],
        auths: [],
        defaultKeys: {defaultSelectedKeys: null, defaultOpenKeys: null}
    };

    componentDidMount() {
        const parms = {"id":1}
        post("/userApi/permissions/loanMenu", parms)
            .then(data => {
                this.setState({
                    menuLoading: false
                });
                const auths = [];
                const defaultKeys = {};

                /**
                 * 解析权限和菜单
                 */
                const resolve = (menus, parentPath = "") => {
                    return menus.filter(menu => {
                        const {children = [], perms, resUrl} = menu;
                        // menu.path = `${parentPath}${path}`;
                        if (perms) {
                            auths.push(perms);
                        }
                        if (children.length) {
                            menu.children = resolve(children, menu.resUrl);
                        }
                        if (menu.resUrl && menu.resUrl !== '/') {
                            defaultKeys.defaultSelectedKeys = menu.id + "";
                            defaultKeys.defaultOpenKeys = menu.parentId + ""
                        }
                        return menu.type !== 2;
                    });
                };
                const menusResult = resolve(data);

                this.setState({
                    menus: menusResult,
                    defaultKeys: defaultKeys,
                    auths
                });
            })
            .catch(() => {
                message.warn("登录已过期，请点击右上角重新登录！");
                localStorage.clear()
                this.props.changeState()
                this.setState({
                    menuLoading: false
                });
            });
    }

    onMenuClick = (e) => {
        const {defaultKeys} = this.state;
        if (e) {
            defaultKeys.defaultOpenKeys = e.key
            this.setState({
                defaultKeys: defaultKeys,
            });
        }

    }

    renderMenuItem = menus => {
        if (!menus.length) {
            return null;
        }

        return menus.map(({id, resUrl, name, type, icon, children = []}) => {
            if (type === 0) {
                return (
                    <Menu.SubMenu key={id} title={name} onTitleClick={this.onMenuClick}>
                        {this.renderMenuItem(children)}
                    </Menu.SubMenu>
                );
            }

            if (type === 1) {
                return (
                    <Menu.Item key={id}>
                        <Link to={resUrl}>
                            <Icon type={icon || "unordered-list"}/>
                            <span>{name}</span>
                        </Link>
                    </Menu.Item>
                );
            }
            return null;
        });
    };

    render() {
        const {menus, defaultKeys} = this.state;
        return (
            <Spin spinning={false}>
                <Menu theme="dark" mode="inline" forceSubMenuRender={true}
                      defaultSelectedKeys={[defaultKeys.defaultSelectedKeys]}
                      defaultOpenKeys={[defaultKeys.defaultOpenKeys]}
                      selectedKeys={[defaultKeys.defaultSelectedKeys]}
                      openKeys={[defaultKeys.defaultOpenKeys]}
                >
                    {this.renderMenuItem(menus)}
                </Menu>
            </Spin>
        );
    }
}

export default withRouter(SideMenu);
